<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>帮我选卡</title>

    <!-- styles here -->
    <link rel="stylesheet" href="../../public/css/loan/mui.min.css">
    <link rel="shortcut icon" href="../favicon.ico">
    <link rel="stylesheet" href="../css/Public_CSS.css">
    <link rel="stylesheet" href="../css/mui.min.css">
    <link rel="stylesheet" href="../css/style.css">
</head>

<body>

    <div class="pick-card">
        <div class="banner-back">
            <span onclick="window.history.back()">
                <i>返回</i>
            </span>帮我选卡
        </div>
        <div class="scroll-y">
            <div class="banner"></div>
            <div class="pick-title">
                <h1>01心意卡特色</h1>
                <small>为了精准推荐，请不要选择超过3项</small>
            </div>
            <div class="pick-feature">
                <ul>
                    <li>
                        <a href="javascript:;" tagid="13">额度高</a>
                    </li>
                    <li>
                        <a href="javascript:;" tagid="14">易下卡</a>
                    </li>
                    <li>
                        <a href="javascript:;" tagid="15">极速下卡</a>
                    </li>
                    <li>
                        <a href="javascript:;" tagid="16">100%取现</a>
                    </li>
                    <li>
                        <a href="javascript:;" tagid="17">白金权益</a>
                    </li>
                    <li>
                        <a href="javascript:;" tagid="18">开卡有礼</a>
                    </li>
                    <li>
                        <a href="javascript:;" tagid="20">高颜值卡</a>
                    </li>
                    <li>
                        <a href="javascript:;" tagid="19">优惠多多</a>
                    </li>
                </ul>
            </div>
            <div class="next">
                <a onclick="next()" class="btn btn-red">下一步</a>
            </div>
        </div>
    </div>

    <!-- scripts here -->
    <script type="text/javascript" src="../js/main.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/vue.min.js"></script>
    <script type="text/javascript" src="../../public/js/loan/mui.min.js"></script>
    <script>
        var tags = [];
        mui.init();
        $(function () {

            var tagsStr = sessionStorage.getItem("tags1");
            if (tagsStr == null || tagsStr == undefined)
                tags = [];
            else
                tags = tagsStr.split(",");
            if (tags.length > 0) {
                var lis = document.getElementsByTagName('li');
                $.each(document.getElementsByTagName('li'), function (index, el) {
                    var a = el.childNodes;
                    if (a.length == 0)
                        return;
                    if (tags.contains($(a[0]).attr("tagid")))
                        a[0].className = "selected";
                    else
                        a[0].className = "";
                });
            }

            $(".pick-feature ul li a").click(function () {
                if (!$(this).hasClass("selected")) {
                    if (tags.length >= 3) {
                        mui.alert("最多选择3个");
                        return;
                    }
                    $(this).addClass("selected");
                    tags.push($(this).attr("tagid"));
                } else {
                    $(this).removeClass("selected");
                    tags.remove($(this).attr("tagid"));
                }
            });
        });

        function next() {
            window.location.href = "smart-select2.html";
            sessionStorage.setItem("tags1", tags);
        }
    </script>

</body>

</html>